<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="permission"></icon>
                    权限管理
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <el-row :gutter="20">
                <!-- 模块组 -->
                <el-col :sm="5" :lg="4" :xl="3" class="hidden-xs-only">
                    <div class="block">
                        <div class="block-header">
                            <div class="title">
                                <icon name="option"></icon>
                                模块组
                            </div>
                            <div class="op-btn">
                                <el-button type="primary"
                                           size="mini"
                                           icon="el-icon-refresh"
                                           circle
                                           style="padding: 4px;"
                                           :loading="operate.groupLoading"
                                           @click="handleRefreshGroup"></el-button>
                            </div>
                        </div>
                        <div id="group" class="block-content">
                            <div class="r-group-list">
                                <div class="r-group-list__item"
                                     @click="getQuery({parent_id: 0})">
                                    <icon name="all" :class="param.parent_id ? '' : 'text-primary'"></icon>
                                    <el-link :type="param.parent_id ? '' : 'primary'"
                                             :class="param.parent_id ? '' : 'text-bold'"
                                             :underline="false">全部
                                    </el-link>
                                </div>
                                <div v-for="item in groups"
                                     :key="item.id"
                                     class="r-group-list__item"
                                     @click="getQuery({parent_id: item.id})">
                                    <icon :name="item.icon"
                                            :class="param.parent_id === item.id ? 'text-primary' : ''"></icon>
                                    <el-link :type="param.parent_id === item.id ? 'primary' : ''"
                                             :class="param.parent_id === item.id ? 'text-bold' : ''"
                                             :underline="false">{{ item.display_name }}
                                    </el-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 列表 -->
                <el-col :xs="24" :sm="19" :lg="20" :xl="21">
                    <div class="block block-rounded">
                        <div class="block-header">
                            <div class="title">
                                <icon name="data-list"></icon>
                                权限列表
                            </div>
                        </div>
                        <div class="block-content">
                            <!-- 选项 -->
                            <div class="block-option">
                                <el-row>
                                    <el-col :span="8">
                                        <el-input v-model="params.keyword"
                                                  size="medium"
                                                  class="input-with-select"
                                                  placeholder="请输入内容"
                                                  clearable
                                                  :disabled="operate.searchLoading"
                                                  @keyup.enter.native="handleSearch">
                                            <el-select v-model="params.keyword_type"
                                                       slot="prepend"
                                                       placeholder="不限"
                                                       style="width: 80px;">
                                                <el-option label="不限" value=""></el-option>
                                                <el-option label="路由" value="name"></el-option>
                                                <el-option label="名称" value="display_name"></el-option>
                                            </el-select>
                                            <el-button slot="append"
                                                       icon="el-icon-search"
                                                       :loading="operate.searchLoading"
                                                       @click="handleSearch">搜索
                                            </el-button>
                                        </el-input>
                                    </el-col>
                                    <el-col :span="16" class="text-right">
                                        <el-button-group>
                                            <el-button type="primary"
                                                       size="medium"
                                                       icon="el-icon-refresh"
                                                       :loading="operate.loading"
                                                       @click="handleReload">重新载入
                                            </el-button>
                                            <el-button type="primary"
                                                       icon="el-icon-plus"
                                                       size="medium"
                                                       @click="openDialogBox">创建
                                            </el-button>
                                        </el-button-group>
                                    </el-col>
                                </el-row>
                            </div>
                            <!-- 权限列表 -->
                            <el-table ref="dataList"
                                      row-key="id"
                                      highlight-current-row
                                      :stripe="true"
                                      :data="permissions"
                                      :empty-text="table.emptyText"
                                      v-loading="table.loading"
                                      :element-loading-text="table.loadText"
                                      :element-loading-background="table.backgroundColor"
                                      :default-sort="{order: 'descending'}"
                                      @sort-change="handleSort">

                                <el-table-column label="图标" width="50" align="center">
                                    <template slot-scope="item">
                                        <icon :name="item.row.icon" class="font-s16"></icon>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="name"
                                                 label="路由"
                                                 width="220"
                                                 :sortable="'custom'"></el-table-column>

                                <el-table-column prop="display_name" label="名称" width="150"></el-table-column>

                                <el-table-column prop="description" label="描述"></el-table-column>

                                <el-table-column label="操作" width="90" align="center">
                                    <template slot-scope="item">
                                        <el-button-group class="r-button-group">
                                            <el-button type="warning"
                                                       size="mini"
                                                       icon="el-icon-edit"
                                                       @click="editDialogBox(item)">
                                            </el-button>
                                            <el-popconfirm icon="el-icon-info"
                                                           icon-color="red"
                                                           title="确定删除该角色吗？"
                                                           confirm-button-text="确定"
                                                           cancel-button-text="取消"
                                                           @confirm="confirmDelete(item)">
                                                <el-button type="danger"
                                                           size="mini"
                                                           slot="reference"
                                                           icon="el-icon-delete"></el-button>
                                            </el-popconfirm>
                                        </el-button-group>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <!-- 页码 -->
                            <div class="block-pagination text-center">
                                <el-pagination :total="total"
                                               :page-sizes="pagination.pageSizes"
                                               :page-size.sync="table.perPage"
                                               :current-page.sync="table.currentPage"
                                               @current-change="getQuery({per_page: table.perPage, page: table.currentPage})"
                                               background
                                               layout="sizes, prev, pager, next, jumper"></el-pagination>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import baseMixins from '@/mixins/base'
import DialogBoxMixins from '@/mixins/dialog'
import AuthBoxMixins from '@/mixins/cms/auth'

import { loading, errorMessage, successMessage } from '@/utils'

import Create from '@/views/cms/admin/permission/Create.vue'
import Edit from '@/views/cms/admin/permission/Edit.vue'

const module = namespace('cms/permission')

@Component({
  components: {
    Create,
    Edit
  }
})

export default class Index extends mixins(baseMixins, DialogBoxMixins, AuthBoxMixins) {
  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false,
    groupLoading: false
  }

  // Vuex
  @module.State groups!: Array<any>
  @module.State permissions!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action group!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>
  @module.Action destroy!: (payload: any) => Promise<any>

  // 钩子
  public created() {
    if (!this.permissions.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @protected
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @return Promise<any>
   */
  private getQuery(): Promise<any> {
    this.table.loading = true
    return this.query({param: this.params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 刷新分组
   */
  private handleRefreshGroup(): void {
    const _loading = loading({
      target: '#group'
    })
    this.operate.groupLoading = true
    this.group({}).then((res) => {
      console.log(res)
      this.operate.groupLoading = false
      _loading.close()
      if (res.status !== 200) {
        errorMessage(res.message)
      }
    }).catch((err) => {
      this.operate.groupLoading = false
      _loading.close()
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.params = {
      keyword_type: this.params.keyword_type,
      keyword: this.params.keyword
    }
    this.operate.searchLoading = true
    this.getQuery().then((res) => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @protected
   */
  private handleReload(): void {
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理排序
   *
   * @protected
   * {column, prop, order}
   */
  private handleSort({prop, order}: { prop: string, order: string }): void {
    // this.getQuery({order_field: prop, order})
    this.getQuery()
  }

  /**
   * 编辑
   *
   * @param item
   * @private
   */
  private editDialogBox(item: any): void {
    const _loading = loading({background: 'transparent'})
    this.show({id: item.row.id}).then((res) => {
      if (res.status === 200) {
        this.dialogBox.component = 'Edit'
        this.$nextTick(() => {
          this.dialogBox.visible = true
          this.dialogBox.index = item.$index
        })
      }
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 删除
   *
   * @param item
   * @private
   */
  protected confirmDelete(item: any) {
    this.table.loading = true
    this.destroy({id: item.row.id, index: item.$index}).then((res) => {
      this.table.loading = false
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
    }).catch((err) => {
      this.table.loading = false
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
